
<script lang="ts" setup>

    const props = defineProps({
        disabledvalue:{
            type: Boolean,
            required: true,
        },
    });
    const emits = defineEmits(["searchtitle"]);
    const modileDisabled = ref(false);
    const inputRef = ref()
    const input = ref('')
    function onClickOut(){
        if (modileDisabled.value==true) {
            ElMessage.warning('请等AI客服回复完再发送哦~ ')    
            inputRef.value.focus();     
        }else{
            if (input.value=='') {
                ElMessage.error('发送内容不能为空! ')
            }else if(/^ *$/.test(input.value)){
                ElMessage.error('发送内容不能为空! ')
            }else{
                emits('searchtitle',input.value,true)
                // inputRef.value.focus() 移动端发送完不能input添加焦点 input焦点 会显示键盘 让页面变小 
                input.value = ''
                // inputRef.value.blur();
            }
        }
    }
    // 监听列表页面是否请求完成  完成继续下一次提问
    watch(()=>props.disabledvalue,(newValue,oldValue)=>{
        modileDisabled.value = newValue;
    },{immediate:true,deep:true})   
</script>

<template>
    <section class="box w-full relative  flex flex-col">
        <div class="chat-toolbor  w-full h-20 flex items-center justify-start px-2">
            <el-input v-model="input" ref="inputRef" @keydown.enter="onClickOut"  placeholder="请输入您的内容" />
            <el-button type="primary" class="ml-2" @click="onClickOut">发送</el-button>
        </div>
    </section>
</template>

<style scoped>
.chat-toolbor{
    background-color: #FFFFFF;
    box-shadow: 0px 0px 18px 0px rgba(1,74,113,0.13);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.chat-toolbor /deep/ .el-input__inner{
    height: 40px;
}
.box{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
    width: 100vw;
}
</style>